<template>
  <view class="container p-b-80">
    
    <view class="statusInfo" v-if="detail.refund_status !== 3">
      <view class="font-44 text-bold c-origin">售后中</view>
      <view class="c-8d">
        审核通过后，金额原路返回
      </view>
      <image :src="$util.img('/image/status_refund.png')" mode=""></image>
    </view>
	<view class="statusInfo" v-else>
      <view class="font-44 text-bold c-origin">退款成功</view>
      <view class="c-8d">
        金额原路返回
      </view>
      <image :src="$util.img('/image/status_icon4.png')" mode=""></image>
    </view>
    
    <!-- <view class="flex-x-between boxPanel m-24 p-30" v-if="orderDetail.delivery_company||orderDetail.delivery_no">
      <view class="text-bold">{{orderDetail.delivery_company}}&nbsp;&nbsp;&nbsp;&nbsp;{{orderDetail.delivery_no}}</view>
    </view>
    
    <view class="addressEmpty boxPanel">
      <view class="font-30 text-bold address">
       {{orderDetail.address.province_name}}{{orderDetail.address.city_name}}{{orderDetail.address.district_name}}{{orderDetail.address.address}}
      </view>
      <view class="c-74 font-weight-5">{{orderDetail.address.username}}&nbsp;&nbsp;&nbsp;&nbsp;{{orderDetail.address.phone}}</view>
    </view> -->
    
    <view class="boxPanel p-20 m-l-24 m-r-24 m-b-24">
      <view class="goodsInfo">
        <image :src="$util.img(detail.sku_image, { size: 'mid' })" mode="aspectFill" lazy-load></image>
        <view class="right">
          <view class="name ellipsis-2">{{ detail.sku_name }}</view>
        </view>
      </view>
      <view class="flex-x-between m-t-20">
        <view class="c-60">共计 1 件商品</view>
        <view class="c-60 flex-y-baseline">
          退款金额 
          <text class="font-32 text-bold color-title2 m-l-6">¥{{ detail.refund_apply_money }}</text>
        </view>
      </view>
    </view>
    
    <view class="boxPanel m-l-24 m-r-24 m-b-24 radius-20 p-20">
      <view class="flex-between m-t-22">
        <view class="c-78">退款方式</view>
        <view class="flex-y-center">
          {{ detail.refund_type == 1 ? '仅退款' : '退款退货' }}
        </view>
      </view>
      <view class="flex-between m-t-22" v-if="detail.refund_status == 3">
        <view class="c-78">退款途径</view>
        <view class="flex-y-center">
          {{ detail.refund_money_type == 1 ? '原路退款' : detail.refund_money_type == 2 ? '线下退款' : '退款到余额' }}
        </view>
      </view>
      <view class="flex-between m-t-22">
        <view class="c-78">退款原因</view>
        <view class="flex-y-center">
          {{ detail.refund_reason }}
        </view>
      </view>
      <view class="flex-between m-t-22" v-if="detail.refund_status == 3 && detail.refund_real_money>0">
        <view class="c-78">退款金额</view>
        <view class="flex-y-center">
          {{ detail.refund_real_money }}
        </view>
      </view>
	  <view class="flex-between m-t-22" v-else-if="detail.refund_apply_money>0">
        <view class="c-78">退款金额</view>
        <view class="flex-y-center">
          {{ detail.refund_apply_money }}
        </view>
      </view>
      <view class="flex-between m-t-22">
        <view class="c-78">退款编号</view>
        <view class="flex-x-end" >
          {{ detail.refund_no }}
        </view>
      </view>
      <view class="flex-between m-t-22 ">
        <view class="c-78">申请时间</view>
		 <view class="flex-x-end" >
          {{ $util.timeStampTurnTime(detail.refund_action_time) }}
        </view>
      </view>
	   <view class="flex-between m-t-22 ">
        <view class="c-78">退款时间</view>
		 <view class="flex-x-end" >
         {{ $util.timeStampTurnTime(detail.refund_time) }}
        </view>
      </view>
      <view class="flex-between m-t-22 " v-if="detail.refund_remark != ''">
        <view class="c-78">退款说明</view>
		 <view class="flex-x-end" >
         {{ detail.refund_remark }}
        </view>
      </view>
    </view>
    
   
    <view class="footers fixfooter" :class="{ 'bottom-safe-area': isIphoneX }" v-if="detail.refund_action.length">
	  <block v-for="(actionItem, actionIndex) in detail.refund_action" :key="actionIndex">
		<view class="submit" @click="cancelAfterSale()" v-if="actionItem.event == 'orderRefundCancel'">取消售后</view>
      	<view class="submit submit_border_on" @click="editDeliver()" v-if="actionItem.event == 'orderRefundDelivery'">填写快递信息</view>
	  </block>
    </view>
    
  </view>
</template>

<script>
// 退款状态0申请中，1已审核成功，-1拒绝,-2用户撤销
  export default {
    data() {
      return {
        isIphoneX: false, //判断手机是否是iphoneX以上
        detail: {},
        order_goods_id: 0,
        

      }
    },
    onLoad(e) {
      this.isIphoneX = this.$util.uniappIsIPhoneX()
      this.order_goods_id = e.order_goods_id || 0;
      this.getRefundDetail();
    },
    methods: {
      editDeliver() {
        this.$util.redirectTo('/pages/refundEditDeliver/refundEditDeliver?order_goods_id='+this.order_goods_id)
      },
       getRefundDetail() {
        this.$api.sendRequest({
          url: "/api/orderrefund/detail", 
          data: {
            order_goods_id: this.order_goods_id
          },
          success: res => {
            if (res.code >= 0) {
               this.detail = res.data;
            } else {
              this.$util.showToast({ title: res.message });
            }
          }
        });
      },
      cancelAfterSale() {
        	uni.showModal({
				content: '撤销之后本次申请将会关闭,如后续仍有问题可再次发起申请。',
				cancelText: '暂不撤销',
				cancelColor: '#898989',
				success: res => {
					if (res.confirm) {
						this.$api.sendRequest({
							url: '/api/orderrefund/cancel',
							data: {
								order_goods_id: this.order_goods_id,

							},
							success: res => {
								if (res.code >= 0) {
									this.$util.showToast({ title: '撤销成功' });
									setTimeout(() => {
										this.$util.redirectTo('/pages/mallOrder/mallOrder',{},'reLaunch');
									}, 1000);
								}
							}
						})
					}
				}
			})
      },
      copyTxt(order_no) {
        this.$util.copy(order_no);
      },
    }
  }
</script>

<style lang="scss" scoped>
.statusInfo {
  position: relative;
  background: #fff;
  padding: 50rpx 30rpx;
  border-radius: 0 0 20rpx 20rpx;
  image {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 274rpx;
    height: 200rpx;
  }
}
.addressEmpty {
  padding: 34rpx;
  margin: 24rpx;
  .address {
    padding-bottom: 20rpx;
    margin-bottom: 20rpx;
    border-bottom: 1px solid #F3F4F5;
  }
}
.goodsInfo {
  display: flex;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #F3F4F5;
  image {
    width: 180rpx;
    height: 180rpx;
    border-radius: 20rpx;
    margin-right: 20rpx;
  }
  .right {
    width: 70%;
    .name {
      height: 78rpx;
      line-height: 1.4;
      margin-bottom: 20rpx;
    }
  }
}

.zengBox {
  background: linear-gradient(180deg, #FFDCDC 0%, #FFF 31.69%);
  .zengimg {
    position: absolute;
    top: 0;
    right: 0;
    width: 189rpx;
    height: 252rpx;
  }
}

.quanimg {
  width: 32rpx;
  height: 30rpx;
}

.refund_com {
  width: 140rpx;
  height: 52rpx;
  line-height: 52rpx;
  border-radius: 20rpx;
  text-align: center;
  font-size: 24rpx;
  color: #606882;
  border: 1px solid #B8BAC2;
  background-color: #fff;
  box-sizing: border-box;
}

.footers {
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 10rpx 24rpx;
  .submit {
    display: inline-block;
    height: 78rpx;
    line-height: 78rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    color: #5D657F;
    padding: 0 32rpx;
    border: 1px solid #BBBEC9;
    margin-left: 20rpx;
  }
  .submit_border_on {
    color: #fff!important;
	background: $color-title2!important;
  }
}

.imgs {
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}
</style>
